import React from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { width } from '~/utils/px2dp';
interface Props {
    title?: string;
    content: string;
    visible: boolean;
    cancelText?: string;
    confirmText?: string;
    onCancel: () => void;
    onConfirm: () => void;
    children?: any;
}

export default function DialogModal(props: Props) {
    const { visible, title, content, cancelText, confirmText, onCancel, onConfirm, children } = props;
    const { t } = useTranslation();

    return (
        <Modal
            visible={visible}
            animationType="fade"
            transparent={true}
            statusBarTranslucent={true}
            hardwareAccelerated={true}>
            <View style={styles.modalContainer}>
                <View style={styles.container}>
                    <Text style={styles.title}>{title || t('tipTitle')}</Text>
                    {children ? (
                        <View>{children}</View>
                    ) : (
                        <>{React.isValidElement(content) ? content : <Text style={styles.bodyText}>{content}</Text>}</>
                    )}

                    <View style={styles.footer}>
                        <TouchableOpacity style={styles.button} onPress={onCancel}>
                            <Text style={styles.buttonText}>{cancelText || t('cancel')}</Text>
                        </TouchableOpacity>
                        <View style={styles.line} />
                        <TouchableOpacity style={styles.button} onPress={onConfirm}>
                            <Text style={[styles.buttonText, { color: '#000' }]}>{confirmText || t('confirm')}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    );
}

const modalWidth = width * 0.84;
const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        width: modalWidth,
        backgroundColor: '#fff',
        borderRadius: 6,
        paddingTop: 20,
        paddingBottom: 5,
        paddingHorizontal: 18,
    },
    title: {
        fontSize: 18,
        color: '#212121',
        alignSelf: 'center',
    },
    bodyText: {
        marginVertical: 20,
        fontSize: 14,
        lineHeight: 22,
        color: '#212121',
        textAlign: 'center',
    },
    footer: {
        height: 46,
        flexDirection: 'row',
        alignItems: 'stretch',
        borderTopWidth: 1,
        borderTopColor: '#f0f0f0',
    },
    button: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonText: {
        fontSize: 16,
        color: '#b2b2b2',
    },
    line: {
        width: 1,
        marginVertical: 10,
        alignSelf: 'stretch',
        backgroundColor: '#f0f0f0',
    },
});
